<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <title>axios</title>
</head>
<body>
    <div id="app">
        <div>{{response}}</div>
        <button @click='findAllCustomers'>查询所有顾客信息</button>
        <button @click='findCustomerById'>根据id获取顾客信息</button>
        <button @click='login'>登录</button>
        <button @click='queryCustomers'>分页查询顾客信息</button>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            response:[]
        },
        methods:{
            //get 无参
            //查询所有顾客信息
            findAllCustomers(){
                // axios({
                //     url:'http://39.96.21.48:5588/customer/findAll',
                //     method:'GET',
                // }).then((res)=>{
                //     console.log(res.data.data);
                //     // this.response=res.data.data;
                // })

                //简写
                axios.get('http://39.96.21.48:5588/customer/findAll').then((res)=>{
                    console.log(res.data.data);
                    // this.response=res.data.data;
                })
            },

            //get 有参
            findCustomerById(){
                let baseUrl='http://39.96.21.48:5588/'
                // axios({
                //     url:baseUrl+'customer/findCustomerById',
                //     method:'GET',
                //     params:{
                //         id:134
                //     }
                // }).then((res)=>{
                //     console.log(res.data.data)
                //     this.response=res.data.data;
                // })

                //简写

                axios.get(baseUrl+'customer/findCustomerById',{params:{id:134}}).then((res)=>{
                    console.log(res.data.data)
                    this.response=res.data.data;
                })
            },

            //post-json
            login(){
                let obj={
                    password:123321,
                    type:'customer',
                    username:'Banana'
                }
                // axios({
                //     url:'http://39.96.21.48:5588/user/login',
                //     method:'POST',
                //     data:obj
                // }).then((res)=>{
                //     console.log(res.data.data)
                // })

                //简写
                axios.post('http://39.96.21.48:5588/user/login',obj).then((res)=>{
                    console.log(res.data.data)
                })
            },
            //post-qs查询字符串
            queryCustomers(){
                let obj={
                    page:0,
                    pageSize:10
                }
                // axios({
                //     url:'http://39.96.21.48:5588/customer/query',
                //     method:'POST',
                //     data:Qs.stringify(obj)
                // }).then((res)=>{
                //     console.log(res)
                // })

                //简写
                axios.post('http://39.96.21.48:5588/customer/query',Qs.stringify(obj)).then((res)=>{
                    console.log(res)
                })
            }

        },
    })
</script>
</html>